<template>
  <div class="main-container">
    <div class="title-con">
      <div class="title-text">智慧AI-员工SOP分析平台</div>
    </div>
    <div class="current-time">
        <span>{{ nowDate }}</span>
        <span style="padding-left: 20px;">{{ weekDay }}</span>
      </div>
    <div class="videosbox">
      <div class="left-video">
        <!--<l-vue3-video :videoSrc="videoSrc" :isautoplay="isautoplay" :posterSrc="posterSrc" :closeVideo="closeVideo">
        </l-vue3-video>-->
        <!-- <iframe ref="iiframe" :src="iframeUrl" scrolling="no" frameborder="0" title="videoFrame" class="video-iframe" id="bi-iframe" @load="onLoad"></iframe> -->
         <div class="left-top">
           <div class="left-top-1">
            <div class="ok-circle">
              <div class="ball-back">6个</div>
              <!-- <dv-decoration-9 :dur="12" class="dv-circle" style="width:150px;height:150px;">6个</dv-decoration-9> -->
              <div class="any-title">总计OK</div>
            </div>
            <div class="ng-circle">
              <div class="ball-back">2个</div>
              <!-- <dv-decoration-9 :dur="12" class="dv-circle" style="width:150px;height:150px;">2个</dv-decoration-9> -->
              <div class="any-title">总计NG</div>
            </div>
           </div>
           <div class="left-top-2">
            <div class="pro-circle">
              <div class="ball-back">200个</div>
              <!-- <dv-decoration-9 :dur="12" class="dv-circle" style="width:150px;height:150px;">200个</dv-decoration-9> -->
              <div class="any-title">总计产量</div>
            </div>            
            <div class="time-circle">
              <div class="ball-back">6天</div>
              <!-- <dv-decoration-9 :dur="12" class="dv-circle" style="width:150px;height:150px;">6天</dv-decoration-9> -->
              <div class="any-title">运行时长</div>
            </div>
           </div>
         </div>
         <div class="left-bottom">
          <dv-decoration-7 style="width:230px;height:30px;margin: auto;font-size:18px;font-weight: bold;">当日步骤NG统计</dv-decoration-7>
          <dv-decoration-4 :reverse="true" style="width:300px;height:5px;margin-left: 10%;" />
          <!-- 柱状图 -->
          <div id="ngChart" style="width: 100%;height: 400px;"></div>
         </div>
      </div>
      <div class="middle-video">
        <div class="middle-top">
          <div class="total">
            <div class="contain">
              <div>
                <img class="icon-img" src="../assets/images/total.png"/>
              </div>
              <div>                
                <span>当日Total：</span>
                <span style="font-size: 30px;">40</span>
              </div>
            </div>
          </div>
          <div class="okk">
            <div class="contain">
              <div>
                <img class="icon-img" src="../assets/images/ok.png"/>
              </div>
              <div>
                <span>当日OK：</span>
                <span style="color: #81ce59;font-size: 30px;">30</span>
              </div>    
            </div>        
          </div>
          <div class="ngg">
            <div class="contain">
              <div>
                <img class="icon-img" src="../assets/images/ng.png"/>
              </div>
              <div>
                <span>当日NG：</span>
                <span style="color: #df685b;font-size: 30px;">10</span>
              </div> 
            </div>           
          </div>
          <div class="pie-con">
            <!-- 饼图 -->
             <div id="pieChart" style="width: 100%; height: 120px;"></div>
          </div>
        </div>
        <!-- <div class="middle-center"> -->
          <dv-border-box-1  class="middle-center">
            <iframe ref="iiframe" :src="iframeUrl" scrolling="no" frameborder="0" title="videoFrame" class="video-iframe" id="bi-iframe" @load="onLoad"></iframe>
          </dv-border-box-1>         
        <!-- </div> -->
        <div class="middle-bottom">
          <div class="table-all">
            <div class="table-header">
              <div class="span-con">产线</div>
              <div class="span-con">工序</div>
              <div class="span-con">相机IP</div>
              <div class="span-con">操作人</div>
              <div class="span-con">白夜班</div>
            </div>
            <div class="table-content" v-for="(item,index) in tableData" :key="index">
              <span class="span-con">{{ item.line }}</span>
              <span class="span-con">{{ item.process }}</span>
              <span class="span-con">{{ item.ip }}</span>
              <span class="span-con">{{ item.name }}</span>
              <span class="span-con">{{ item.dayOrNight }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="right-meta">
        <div class="right-top">
          <dv-decoration-7 style="width:230px;height:30px;margin: auto;font-size:18px;font-weight: bold;">SW状态</dv-decoration-7>
          <dv-decoration-4 :reverse="true" style="width:300px;height:5px;margin-left: 10%;" />
           <div class="right-top-1">
                <div class="circle-con" :class="item.stepCheckResult === 'OK'? 'ok-back': (item.stepCheckResult == 'NG'?'ng-back':'')" v-for="(item, index) in swTabel.slice(0,4)" :key="index">
                  <div class="set-place"></div>
                  <div class="name-block">{{ item.name}}</div>
                </div>
            </div>
            <div class="right-top-2">
                <div class="circle-con" :class="item.stepCheckResult === 'OK'? 'ok-back': (item.stepCheckResult == 'NG'?'ng-back':'')" v-for="(item, index) in swTabel.slice(4,8)" :key="index">
                  <div class="set-place" style="width: 80px;height: 50px;"></div>
                  <div class="name-block">{{ item.name}}</div>
                </div>
            </div>
            <div class="right-top-3">
                <div class="circle-con" :class="item.stepCheckResult === 'OK'? 'ok-back': (item.stepCheckResult == 'NG'?'ng-back':'')" v-for="(item, index) in swTabel.slice(8,12)" :key="index">
                  <div class="set-place" style="width: 80px;height: 50px;"></div>
                  <div class="name-block">{{ item.name}}</div>
                </div>
            </div>
          <!-- <dv-percent-pond :config="progressConfig" style="width:300px;height:40px;margin: auto;" /> -->
        </div>
        <div class="right-bottom">
          <dv-decoration-7 style="width:230px;height:30px;margin: auto;font-size:18px;font-weight: bold;">检测NG信息详情</dv-decoration-7>
          <dv-decoration-4 :reverse="true" style="width:300px;height:5px;margin-left: 10%;" />
          <div class="content" v-if="rightdatas.NG?.length > 0">
            <!-- <vue3-seamless-scroll hover-stop="true" :hover="true" :step="0.2" :limitScrollNum="4" :list="rightdatas.NG"
              class="scroll" v-if="rightdatas.NG?.length > 0"> -->
              <div class="item" v-for="(item, index) in rightdatas.NG" :key="index">
                <div class="statics-bottom">
                  <div class="barcode-con">
                    <div class="title-dot"></div>
                    <div style="padding-left: 1%;">
                      <!-- <span class="barcode-title">序列号:</span> -->
                      <span class="barcode-num">{{item.barcode}}</span>
                    </div>
                  </div>
                  <div class="error-desc">{{ item.error_message }}</div>
                  <div class="error-time">{{ item.time }}</div>                  
                </div>
              </div>
            <!-- </vue3-seamless-scroll> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue"
import { computed, watch, onUnmounted,onMounted, inject } from 'vue'
import { useStore } from 'vuex';
import moment from 'moment'
import lVue3Video from "../package/lvideo.vue"
import { getAssetsResource } from '../utils/CommonFun.js'
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import useWebSocket from '../api/useWebSocket.js';
import * as echarts from 'echarts'
// https://sdk-release.qnsdk.com/VID_20220207_144828.mp4
//https://media.w3.org/2010/05/sintel/trailer.mp4
// rtmp://liteavapp.qcloud.com/live/liteavdemoplayerstreamid

// http://cdn3.toronto360.tv:8081/toronto360/hd/playlist.m3u8
//失败测试
// https://sdk-release.qnsdk.com/1080_60_5390.mp4
// const ngChart = ref(null);
// 柱状图测试数据
const ngOptions = ref({
    //  grid:{
    //   show:false
    // },
    tooltip:{
      trigger:'axis',
    },
    xAxis: {
      type: 'category',
      data: ['Step1', 'Step2', 'Step3', 'Step4', 'Step5', 'Step6', 'Step7'],
      axisLabel:{
        rotate:45,
        color:'#ffffff',
      }
    },
    yAxis: {
      type: 'value',
      axisLabel:{
        color:'#ffffff',
      },
      splitLine:{
        show:false,
      }
    },
    series: [
      {
        data: [2, 3, 3, 7, 4, 3, 5],
        type: 'bar',
        barWidth:10,
        label:{
          show:true,
          position:'top',
          color:'#fff'
        }
      }
    ]
})
// 饼图测试数据
const pieConfig = ref({
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {show:false},
    series: [
        {
            name: 'OK/NG统计',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center',
                // formatter:'{b}:{d}%',
                color:'#fff'
            },
            // emphasis: {
            //     label: {
            //         show: true,
            //         fontSize: '20',
            //         fontWeight: 'bold'
            //     }
            // },
            labelLine: {
                show: false
            },
            data: [
                {value: 30, name: 'OK'},
                {value: 10, name: 'NG'},
            ]
        }
    ],
    color:['#81ce59','#df685b']
  })
  // 中间下方测试数据表
  const tableData = ref([
    {line:'差速器分装线',process:'OP9010',ip:'192.168.35.1',name:'张三',dayOrNight:'夜班'}
  ])
  // 进度条数据配置
  const progressConfig = ref({
    value: 66,
    lineDash: [10, 2]
  })
  // 报警信息假数据配置
  const alarmConfig = ref({
      header: ['列1', '列2', '列3'],
      data: [
        ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],
        ['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3'],
        ['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>'],
        ['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3'],
        ['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3'],
        ['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3'],
        ['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>'],
        ['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3'],
        ['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3'],
        ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3']
      ],
      index: true,
      columnWidth: [50],
      align: ['center']
  })
  // SW步骤假数据
  const swTabel = ref([
    {name:"拿轴",step: "step1",stepCheckResult: "OK"},
    {name:"轴扫码",step: "step2",stepCheckResult: "OK"},
    {name:"刷挡圈",step: "step3",stepCheckResult: "OK"},
    {name:"涂油",step: "step4",stepCheckResult: "OK"},
    {name:"齿轮扫码",step: "step5",stepCheckResult: "OK"},
    {name:"下边拿同步环",step: "step6",stepCheckResult: "NG"},
    {name:"上边拿齿毂",step: "step7",stepCheckResult: "OK"},
    {name:"齿毂扫码",step: "step8",stepCheckResult: "OK"},
    {name:"安同步器",step: "step9",stepCheckResult: "NG"},
    {name:"组装",step: "step10",stepCheckResult: "NG"},
    {name:"放行",step: "step11",stepCheckResult: "OK"},
    {name:"",step: "step12",stepCheckResult: ""},
  ])
const videoSrc = ref('http://127.0.0.1:5000/')
// const videoSrc = ref('rtmp://liteavapp.qcloud.com/live/liteavdemoplayerstreamid')
// const videoSrc = ref('https://media.w3.org/2010/05/sintel/trailer.mp4')
// const videoSrc = ref('/src/assets/images/test2.mp4')
const isautoplay = ref(false)//是否自动播放
const posterSrc = ref(getAssetsResource('bg.jpg'))
const store = useStore()
const closeVideo = ref(false)
/* 头部日期 */
const nowDate = ref(null)
const rightdatas = ref({})
const dateTimer = setInterval(() => {
  nowDate.value = moment().format('YYYY-MM-DD HH:mm:ss')
}, 1000)
const iiframe = ref(null)
const videoHeight = ref(null)
const videoWidth = ref(null)
const iframeUrl = ref("")
const message = ref('');
const { socket, isConnected, sendMessage } = useWebSocket(
  'ws://10.57.104.19:8082/websocket',
  {
    reconnectInterval: 3000,
    maxReconnectAttempts: 5,
  }
);
const weekDay = computed(() => {
  let day = ''
  switch (moment().day()) {
    case 0:
      day = '星期日'
      break
    case 1:
      day = '星期一'
      break
    case 2:
      day = '星期二'
      break
    case 3:

      day = '星期三'
      break
    case 4:

      day = '星期四'
      break
    case 5:

      day = '星期五'
      break
    case 6:

      day = '星期六'
      break
  }
  return day
})
//关闭销毁vodeo
const closeVideos = () => {
  closeVideo.value = true
  isautoplay.value = false
}
onUnmounted(() => {
  clearInterval(dateTimer)
    // 发送消息
    sendMessage();
})
onMounted(()=>{
  const myChart = echarts.init(document.getElementById('ngChart'))
		myChart.setOption(ngOptions.value)
  // // 根据页面大小自动响应图表大小
  //   window.addEventListener('resize', function () {
  //     myChart.resize()
  //   })
  const pieinChart = echarts.init(document.getElementById('pieChart'))
  pieinChart.setOption(pieConfig.value)
})

watch(
  () => iiframe.value,
  (val) => {
    if(val){
      console.log('获取他的宽高',val.clientHeight,val.clientWidth)
      iframeUrl.value = "http://127.0.0.1:5000/video?size=" + val.clientWidth + "x" + val.clientHeight
    }
  }
)
watch(
  () => store.getters.dataObj,
  (val) => {
    if(val){
      rightdatas.value = JSON.parse(val)
      // console.log('I got U',rightdatas.value)
    }
  }
)
</script>
<style lang="scss" scoped>
.main-container {
  position: relative;
  display: grid;
  grid-template-rows: 12% 88%;
  background-image: url('@/assets/images/bg.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: local;
  width: 100%;
  height: 100%;
  overflow:auto;  
  min-height: 980px;
  .current-time {
      color: #ffffff;//rgb(162, 202, 250);
      font-size: 16px;
      position: absolute;
      top: 5%;
      right: 12%;
    }
  .title-con {
    align-items: center;
    width: 94%;
    margin: auto;
    background-image: url('@/assets/images/title_bg.png');
    background-repeat: no-repeat;
    background-size: 100% auto;

    .title-text {
      text-align: center;
      padding-right:6%;
      padding-bottom:1%;
      margin:auto;
      font-family: 'DS-DIGIT';
      font-size: 38px;
      color: rgb(182, 213, 250);
      text-shadow: rgb(255, 255, 255) 0px 0px 1px;
      font-weight: normal;
      //justify-content: center;
      align-items: center;
    }
    .person-info {
      margin: inherit;

      .right-menu-item {
        display: flex;
        align-items: center;
        padding: 0 8px;
        height: 100%;
        font-size: 20px;
        vertical-align: text-bottom;
        color: rgb(162, 202, 250);

        &.hover-effect {
          cursor: pointer;
          transition: background 0.3s;

          &:hover {
            background: rgba(0, 0, 0, 0.025);
          }
        }

        :focus-visible {
          outline: none;
        }
      }
    }
  }

  .videosbox {
    width: 95%;
    height:93%;
    display: grid;
    grid-template-columns: 20% 60% 20%;
    margin: 3% auto;

    .left-video{
      // 16:9
      height: 100%;
      width: 100%;
      display: grid;
      grid-template-rows: 50% 50%;
      // margin: auto;
      // .video-iframe{
      //   height: 731.25px;
      //   width: 1300px;
      // }
      .left-top{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: 50% 50%;
          background-image: url('../assets/images/modal.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        .ball-back{
          line-height: 160px;
          background-image: url('../assets/images/0231.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: 150px;
          height: 150px;
          font-size: 20px;
          color: rgb(182, 213, 250);
          font-weight: bold;
        }
        .any-title{
          font-size: 15px;
          font-weight: bold;
        }
        // background-color: #dd4b39;
        .left-top-1{
          display: flex;
          color: #fff;
          width: 100%;
          justify-content: space-around;
          .ng-circle{
            text-align: center;
          }
          .ok-circle{
            text-align: center;
          }
        }
        .left-top-2{
          display: flex;
          color: #fff;
          width: 100%;
          justify-content: space-around;
          .pro-circle{
            text-align: center;
          }
          .time-circle{
            text-align: center;
          }
        }
        .dv-circle{
          font-size: 20px;
        }
      }
      .left-bottom{
        width: 100%;
        height: 100%;
        color: #ffffff;
          background-image: url('../assets/images/modal.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        // background-color: aqua;
      }
    }
    .middle-video{
      display: grid;
      grid-template-rows: 12% 73% 15%;
      background-image: url('../assets/images/middlemodal.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .middle-top{
        width: 90%;
        height: 100%;
        margin: auto;
        // background-color: green;
        display: grid;
        grid-template-columns: 30% 25% 25% 20%;
        color: rgb(182, 213, 250);
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        // line-height: 100px;
        .total{
          display: flex;
          align-items: center;
          justify-content: space-around;
          width: 90%;
          height: 100%;
          // background: linear-gradient(90deg,rgba(12,41,73,0.7),transparent);
          margin: auto;
          .contain{
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin: auto;
            width: 68%;
            .icon-img{
              width: 20px;
              height: 20px;
            }
          }
        }
        .okk{
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin: auto;
          width: 90%;
          height: 100%;
          // background: linear-gradient(90deg,rgba(12,41,73,0.7),transparent);
          margin: auto;
          .contain{
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin: auto;
            width: 68%;
            .icon-img{
              width: 20px;
              height: 20px;
            }
          }
        }
        .ngg{
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin: auto;
          width: 90%;
          height: 100%;
          // background: linear-gradient(90deg,rgba(12,41,73,0.7),transparent);
          margin: auto;
          .contain{
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin: auto;
            width: 68%;
            .icon-img{
              width: 20px;
              height: 20px;
            }
          }
        }
        .pie-con{
        width: 90%;
        height: 100%;
        // background: linear-gradient(90deg,rgba(12,41,73,0.7),transparent);

        }
      }
      .middle-center{
        width: 1010px;
        height: 591px;
        margin: auto;
        // dv-border-box-1{
        // width: 968px;
        // height: 545px;
        .video-iframe{
        width: 968px;
        height: 545px;
        margin-top: 2%;
        // }
        }
      }
      .middle-bottom{
        width: 100%;
        height: 100%;
        font-size: 20px;
        .table-all{ 
          margin: auto;         
        .table-header{
          display: flex;
          width: 100%;
          justify-content: space-around;
          background: #2c3f7ea6;
          height: 30px;
          align-items: center;
          text-align: center;
          color: #fff;
        }
        .table-content{
          display: flex;
          width: 100%;
          justify-content: space-around;
          height: 80px;
          text-align: center;
          align-items: center;
          color: #fff;
        }
        .span-con{
          width: 200px;
        }
        }
      }
    }
    .right-meta {
      display: grid;
      grid-template-rows: 48% 52%;
      .right-top{
        width: 100%;
        height: 100%;
        color: #ffffff;
        display: grid;
        grid-template-rows:7% 9% 27% 27% 27%;
        align-items: center;
        line-height: 80px;
        background-image: url('../assets/images/modal.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        // background-color: purple;
        .right-top-1{
          color: #fff;
          margin-top: 8%;
          display: flex;
          margin: auto;
          text-align: center;
          width: 93%;
          justify-content: space-around;
          .circle-con{
            background-color: transparent;
            border-radius: 80%;
            height: 75px;
            width: 80px; 
            .set-place{
              width: 75px;
              height: 50px;
            }
            .name-block{
              width: 75px;
              font-size: 15px;
            }
          }
          .ok-back{
            background-image: url('../assets/images/okb.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 75px;
            height: 75px;
          }
          .ng-back{
            background-image: url('../assets/images/ngb.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 75px;
            height: 75px;
          }
        }
        .right-top-2{
          margin-top: 8%;
          display: flex;
          margin: auto;
          text-align: center;
          width: 93%;
          justify-content: space-around;
          .circle-con{
            background-color: transparent;
            border-radius: 80%;
            height: 75px;
            width: 75px;
            .set-place{
              width: 75px;
              height: 50px;
            }
            .name-block{
              width: 80px;
              font-size: 15px;
            }
          }
          .ok-back{
            background-image: url('../assets/images/okb.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 75px;
            height: 75px;
          }
          .ng-back{
            background-image: url('../assets/images/ngb.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 75px;
            height: 75px;
          }
        }
        .right-top-3{
          margin-top: 8%;
          display: flex;
          margin: auto;
          text-align: center;
          width: 93%;
          justify-content: space-around;
          .circle-con{
            background-color: transparent;
            border-radius: 80%;
            height: 75px;
            width: 75px; 
            .set-place{
              width: 75px;
              height: 50px;
            }
            .name-block{
              width: 75px;
              font-size: 15px;
            }
          }
          .ok-back{
            background-image: url('../assets/images/okb.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 75px;
            height: 75px;
          }
          .ng-back{
            background-image: url('../assets/images/ngb.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 75px;
            height: 75px;
          }
        }
      }
      .right-bottom{
        background-image: url('../assets/images/modal.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        color: #ffffff;
        // background-color: orange;        
      }
    }
  }
}

.split {
  background-image: url('@/assets/images/split.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  width: 360px;
  height: 17px;
  margin: auto;
}

// // 关键css代码
// ::v-deep.el-table__header colgroup col[name="gutter"] {
//     display: table-cell !important;
// }
// ::v-deep .el-table,
// ::v-deep .el-table__expanded-cell,
// ::v-deep .el-table th,
// ::v-deep .el-table tr {
//   background-color: transparent; // 采用大屏本来的样式，自身设为透明色
//   th.gutter, colgroup.gutter {
//     display: none !important;//此处的宽度值，对应你自定义滚动条的宽度即可
//   }
// }
// ::v-deep .el-table th,
// .el-table tr {
//   // 如果要增加竖线上方加上.el-table td
//   background-color: transparent;
//   border-bottom: 1px solid #6e655f;
// }
// // 鼠标滑过td上作用的样式，ie6不支持:hover伪类属性，如果是ie6要写成tr.over样式
// ::v-deep .el-table tbody tr:hover > td {
//   background-color: transparent !important;
// }
// // 如果td没有颜色，可以去掉，这里加上保险
// ::v-deep .el-table__body tr.hover-row > td {
//   background-color: transparent;
// }
// ::v-deep .el-table th.el-table__cell.is-leaf {
//     border-bottom: none;
//   }
//   ::v-deep .el-table .el-table__header-wrapper th,
//       .el-table .el-table__fixed-header-wrapper th {
//       color: #adb1b4;
//       background-color: #05458c5c !important;
//   }
// ::v-deep .table_header {
//   color: #fff;
//   text-align: center;
// }
// ::v-deep .el-table {
//     background: none;
//     color: #fff;
//     padding: 7px;
//     height:14rem;
//     tr {
//       background-color: transparent !important;
//     }
//     &.is-scrolling-left.el-table--border {
//       .el-table-fixed-column--left.is-last-column.el-table__cell {
//         border-right-color: transparent;
//       }
//     }
//     &::before {
//       height: 0px !important;
//       background-color:transparent !important;
//     }      
//     .el-table tr {
//       background-color: transparent !important;
//     }
//     .el-table__border-left-patch {
//       background-color: transparent;
//     }
//     .el-table__header-wrapper table,
//     .el-table__body-wrapper table{
//       width: 100% !important;
//     }
//   }
//   ::v-deep.el-table td.el-table__cell,
//   .el-table th.el-table__cell.is-leaf {
//     border-bottom: none;
//   }
//   ::v-deep .el-table__inner-wrapper {
//   &::after, &::before {
//     background-color: transparent !important;
//   }
// }


.content {
  font-size: 20px;
  width: 100%;
  height: 300px;
  overflow-y: auto;
  /* 隐藏默认的滚动条样式 */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */

  .item {
    width: 100%;
    // padding-left: 24px;
    padding: 0 12px;
    margin-top: 16px;

    .statics-top {
      padding-left:10%;
      color: #fff;
      display: flex;
      justify-content: space-between;
      .statics-text{
        // width:50%;
        font-size: 16px;
        // text-align:center;
      }
    }
    .statics-bottom{
      height:80px;
      display: flex;
      flex-direction:column;
      justify-content:space-around;
      // padding-left:10%;
      .barcode-con{
        display: flex;
        // justify-content:space-around;
        align-items: center;
        color:rgb(162, 202, 250);
        font-weight:bold;
        width:100%;
        .title-dot{
          display: inline-block;
          width: 15px;
          height: 15px;
          border: 2px solid rgb(6, 79, 160);
          border-radius: 50%;
          background-color:rgba(69, 118, 190, 0.9);
        }
        .barcode-title{
          font-size: 16px;
        }
        .barcode-num{
          font-size: 16px;
        }
      }
      .error-desc{
        width:100%;
        display: flex;
        flex-direction: column;
        justify-content:space-around;
        color:#dd4b39;
        font-size: 15px;
        padding-left: 6%;
      }  
      .error-time{        
        width:100%;
        display: flex;
        flex-direction: column;
        justify-content:space-around;
        color:rgb(162,202,250);
        font-size: 14px;
        padding-left: 6%;
      }
    }
  }
}
.dot {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid rgb(6, 79, 160);
    border-radius: 50%;
    position: relative;
    z-index: 1;
    // animation: breathing 2s cubic-bezier(0, 0, 0.25, 1) infinite;
}
.breathing-background {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color:rgba(69, 118, 190, 0.9);
    opacity: 0.2;
    animation: breathing 2s cubic-bezier(0, 0, 0.25, 1) infinite;
}
// 动画 变大再变小
@keyframes breathing {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(2);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
</style>